<layout name="driver"/>
<style>
 .box {
    width: 75%;
    margin: 0 auto;
    padding: 2em 0 2em 0;
 } 
 .box .box-tit {
    color: #C14268;
    font-size: 1.8em;
    font-weight: bold;
 }
 .box p {
    color: #798998;
    font-size: 3.5em;
 }
 .driver-join-info {
	  padding: 0em 1em 1em;
 }
 .site-img {
		width: 75%;
	  margin: 0 auto;
 }
 .site-img img {
	  width: 100%;
 }
 .success {
 	 padding: 0em 1em 0;
 }
</style>
<div class="box">
  <p class="box-tit">荣威</p>
  <p>加油好的士</p>
</div>
<empty name="join">

<!-- 没有参与 -->

<article class="driver-join-info">
  <h3 class="driver-join-title">参与协议</h3>
  <p>一等奖：由上汽荣威集团提供的价值7.9万元的荣威350汽车一辆</p>
</article>

<form id="form" class="driver-jon-form form form-simple" method="post" action="__CONTROLLER__/join">
  
  <div class="form-item">
    <input class="form-control" type="text" name="name" data-nullmsg="请填写您的姓名" placeholder="姓名" required>
  </div>

  <div class="form-item">
    <input class="form-control" type="text" name="service_no" data-nullmsg="请填写您的服务号" placeholder="服务号" required>
  </div>
  
  <div class="form-item">
    <input class="form-control" type="text" name="plate_number" data-nullmsg="请填写您的车牌号" value="豫AT" placeholder="车牌号" required>
  </div>
  
  <div class="form-item">
    <input class="form-control" type="tel" name="tel" data-nullmsg="请填写您的手机号码" data-errormsg="请检查手机号码是否正确" placeholder="手机号" required>
  </div>

  <div class="form-item">
    <input type="hidden" name="sid" value="{$_GET['sid']}">
    <input type="hidden" name="open_id" value="{$open_id}">
    <input type="hidden" name="term_id" value="{$termId}">
    <button class="mt1 btn btn-blue driver-btn w100" type="submit">参与报名</button>
  </div>
  
</form>

<script type="text/javascript">
  (function(){
    // 加载modal.js
    GH.load( "js", "js-modal", "__COMMON__/js/modal.js" );

    // 提交
    var oForm = GH.$( "#form" ),
        formControl = GH.$$( "#form input" );
    
    oForm && oForm.addEventListener( "submit", fnSubmit, false );

    function fnSubmit( e ) {
      e.preventDefault();
      var _this = this;
      checkForm(function() {
        postForm.call(_this);
      });
    };

    // 表单验证
    function checkForm( callback ) {

      var i = 0,
          item = null,
          reg = /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}/;

      for(; item = formControl[i]; i++) {

        if ( item.getAttribute( "type" ) === "hidden" ) continue;

        if ( !item.value.trim() ) {
          GH.showMessage( item.getAttribute("data-nullmsg") );
          return false;
        };

      };

      if ( !reg.test( formControl[3].value ) ) {
        GH.showMessage( formControl[3].getAttribute( "data-errormsg" ) );
        return false;
      };

      callback && callback();
    };

    // ajax发送
    function postForm() {
      var fm = new FormData( this );
      var url = this.getAttribute( "action" );
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          var data = JSON.parse( xhr.responseText );
          modal.confirm({
            title: "提交结果",
            text: data.msg,
            buttons: [
              { text: "好的", close: true, click: reload }
            ]
          });
        };
      };
      xhr.open( "post", url, true );
      xhr.send( fm );
    };
    
    function reload() {
      window.location.reload();
    };

  })();
  
</script>

<else/>

<!-- 已经参与 -->

<section class="success">
  <div class="site-img">
  <img src="__STYLE__/Site/images/xiao.png">
</div>
  <header class="success-header tc">
    <h4 class="success-header-title">{$join.name}</span>先生/女士({$join.service_no})</h4>
    <p>恭喜您已成功报名{$driverTerm['name']}活动。</p>
  </header>

  <div class="success-info">
    <h5 class="success-info-title">以下为您的报名信息：</h5>
    <p>手机号码：{$join.tel}</p>
    <p>服务号：{$join.service_no}</p>
    <p>车牌号：{$join.plate_number}</p>
    <p>报名日期：{$join.create_time|date="Y-m-d H:i:s", ###}</p>
  </div>

</section>
</empty>


